<template>
  <div>
    <el-form ref="dataForm" class="form" :rules="rules" :model="temp" label-position="right" label-width="130px">
      <el-form-item label="公众号APPId:" prop="appId">
        <el-select v-model="temp.appId" style="width: 500px;" placeholder="请选择" clearable>
          <el-option
            v-for="item in appIdList"
            :key="item.accountAppId"
            :label="item.accountDesc"
            :value="item.accountAppId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="APP应用APPId:" prop="appAppId">
        <el-input v-model.trim="temp.appAppId" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="APP应用密钥:" prop="appAppKey">
        <el-input v-model.trim="temp.appAppKey" type="password" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="商户Id:" prop="mchId">
        <el-input v-model.trim="temp.mchId" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="支付密钥:" prop="accKey" required>
        <el-input v-model.trim="temp.accKey" type="password" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item v-if="userInfo.userCode === '007'" label="商户税率:" prop="taxRate">
        <el-select v-model="temp.taxRate" style="width: 100%;" placeholder="请选择" clearable>
          <el-option :value="0.1" label="0.1%" />
          <el-option :value="0.2" label="0.2%" />
          <el-option :value="0.3" label="0.3%" />
          <el-option :value="0.4" label="0.4%" />
          <el-option :value="0.5" label="0.5%" />
          <el-option :value="0.6" label="0.6%" />
        </el-select>
      </el-form-item>
      <el-divider />
      <el-form-item label="子商户公众号APPId:" prop="subAppId">
        <el-input v-model.trim="temp.subAppId" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="子商户APP应用APPId:" prop="subAppAppId">
        <el-input v-model.trim="temp.subAppAppId" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="子商户Id:" prop="subMchId">
        <el-input v-model.trim="temp.subMchId" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="$loadingPlugin.submit" @click="save">保存配置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { queryAppidList, queryWxPayDefaultData, saveWxPayInfo } from '@/api'
  import { mapGetters } from 'vuex'

  export default {
    name: 'WxPayTab',
    data() {
      const validAccKey = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入支付密钥'))
        } else {
          if (value !== this.defaultData.accKey) {
            const reg = /(?!^\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]{32}/
            if (!reg.test(value)) {
              callback(new Error('支付密钥格式不正确'))
            }
            callback()
          }
          callback()
        }
      }
      return {
        appIdList: [],
        defaultData: {},
        temp: {
          appId: '',
          appAppId: '',
          appAppKey: '',
          mchId: '',
          accKey: '',
          subAppId: '',
          subAppAppId: '',
          subMchId: '',
          taxRate: ''
        },
        rules: {
          appId: [{ required: true, message: '请输入公众号appId', trigger: 'change' }],
          appAppId: [{ required: true, message: '请输入应用appId', trigger: 'change' }],
          mchId: [{ required: true, message: '请输入商户Id', trigger: 'change' }],
          accKey: [{ validator: validAccKey, trigger: 'blur' }]
        }
      }
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    async created() {
      await Promise.all([this.getAppidList(), this.getDefaultData()])
    },
    methods: {
      async getAppidList() {
        const res = await queryAppidList()
        this.appIdList = res.data.rows.map(item => {
          return {
            ...item,
            accountDesc: item.accountAppId + '　　　' + item.accountDesc
          }
        })
        if (this.appIdList.length > 0) this.temp.appId = this.appIdList[0].accountAppId
      },
      async getDefaultData() {
        const res = await queryWxPayDefaultData({ accountType: 1 })
        this.temp = Object.assign(this.temp, res.data)
        this.defaultData = res.data
      },
      save() {
        this.$refs.dataForm.validate(valid => {
          if (!valid) return
          const params = {
            appId: this.temp.appId,
            appAppId: this.temp.appAppId,
            mchId: this.temp.mchId,
            appAppKey: this.temp.appAppKey,
            subAppId: this.temp.subAppId,
            subAppAppId: this.temp.subAppAppId,
            subMchId: this.temp.subMchId,
            accKey: this.temp.accKey,
            accountType: 1
          }
          if (this.temp.taxRate) params.taxRate = this.temp.taxRate
          this.submit(params)
        })
      },
      async submit(params) {
        await saveWxPayInfo(params)
        this.$notify({
          title: '提示',
          message: '操作成功',
          type: 'success',
          duration: 2000
        })
      }
    }
  }
</script>

<style scoped>

</style>
